<template>
     <el-container >
      <el-container style="height: 800px; border: 1px solid #eee">
        <!-- 侧边栏 -->
  <el-aside width="250px">
        <el-menu :default-active="activeIndex" :default-openeds="['1', '2']">
          <div class="aside-nav">
            <i class="el-icon-menu"></i>
            <span>导航</span>
          </div>
          <el-menu-item index="1" @click="navigate(1)">
            <i class="el-icon-notebook-1"></i>
            图书管理
          </el-menu-item>
          <el-menu-item index="2" @click="navigate(2)">
            <i class="el-icon-edit-outline"></i>
            借阅管理
          </el-menu-item>
        </el-menu>
      </el-aside>
  <el-container style="background-color: rgb(238, 241, 246);">
    <el-header style="display: flex; font-size: 14px">
     <span class="title">图书管理系统</span>
     <el-dropdown @command="handleCommand">
       <span class="el-dropdown-link">
       <i class="el-icon-setting"></i>
       操作
       </span>
      <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="new">新增</el-dropdown-item>
      <el-dropdown-item command="del" >删除</el-dropdown-item>
      </el-dropdown-menu>
     </el-dropdown>
      <span style="margin-left: 10px;">管理员</span>
    </el-header>
    <!-- 主显示界面 -->
    <el-main>
      <!-- 图表数据 -->
      <ChartsComponents></ChartsComponents>
      <!-- 搜索框 -->
       <SearchComponent></SearchComponent>
      <!-- 二级路由出口:图书列表及借阅列表 -->
      <div>
        <router-view/>
      </div>
    </el-main>
  </el-container>
      </el-container>
      <!-- 新增图书弹窗 -->
    <AddBookDialog
      :showDialog="showAddBookDialog"
      @changeDialog="showAddBookDialog = false"
    />
    </el-container>
</template>
<script>
import SearchComponent from '@/components/SearchLayout.vue'
import ChartsComponents from '@/components/ChartsLayout.vue'
import AddBookDialog from '@/components/AddBookDialog.vue'
export default {
  name: 'mainPage',
  data () {
    const item = {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    }
    return {
      tableData: Array(20).fill(item),
      activeIndex: '1', // 初始选中图书管理
      showAddBookDialog: false // 新增图书弹窗显示状态
    }
  },
  components: {
    SearchComponent,
    ChartsComponents,
    AddBookDialog
  },
  created () {
    // 修复启动列表为空问题
    this.navigateToBookList()
  },
  methods: {
    handleCommand (command) {
      if (command === 'new') {
        this.showAddBookDialog = true
      }
    },
    // 修复重复跳转报错问题
    navigate (index) {
      if (index === 1) {
        this.$router.push('/bookList').catch(err => {
          if (err.name !== 'NavigationDuplicated') {
            throw err
          }
        })
      } else {
        this.$router.push('/checkoutList').catch(err => {
          if (err.name !== 'NavigationDuplicated') {
            throw err
          }
        })
      }
    }
  }
}
</script>
<style lang="less">
  // #303643 高级黑
  // #409eff 蓝色
  .el-header, .el-footer {
    background-color: #fff;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-aside {
    color: #333;
  }
  .aside-nav {
    height: 60px;
    padding-left: 24px;
    font-size: 20px;
    line-height: 60px;
    span {
      margin-left: 10px;
    }
  }
  .title {
    flex: 1;
    text-align: left;
    font-size: 20px;
    color: #409eff ;
  }
</style>
